<?xml version="1.0" encoding="UTF-8" ?>
      <%@ page contentType="text/xml;charset=UTF-8" language="java" %>
      <%@ page import="jaapy.Property" %>
  <Module>
  <ModulePrefs title="Jaapy">
    <Require feature="wave" />
    <Require feature="locked-domain" /> 
    <Require feature="dynamic-height" /> 
  </ModulePrefs>
  <Content type="html">
    <![CDATA[ 
      <% Property property = (Property)request.getAttribute("property"); %>

      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">

        google.load("jquery", "1.3.2");
        google.load("jqueryui", "1.7.2");

        function init() 
        {
          $('#movie').corner("bite 1px").parent().css('padding', '8px').corner("round 10px");
          $('#actions img').click(doReduce);
          if (wave && wave.isInWaveContainer()) 
          {
            wave.setStateCallback(stateChanged);
            // call stateChanged to hide details if needed
            stateChanged();
          }
        }

        gadgets.util.registerOnLoadHandler(init);

        // called each time we reduce/expand the gadget
        function stateChanged() 
        {
          if (wave.getState()) 
          {
            newState = wave.getState().get('status');
            if (newState == 'reduce') 
            {
              reduce();
            } else {
              expand();
            }
          }
        }

        // called when clicking on the reduce button
        function doReduce() 
        {
          changeState('reduce');
        }

        // called when clicking on the expand button
        function doExpand() 
        {
          changeState('expand');
        }

        // hides details to reduce gadget
        function reduce() 
        {
          $('#movie').uncorner().parent().css('padding', '0px').uncorner();
          $('.detail').hide('normal');
          $('#frame').animate({width: 650});
          $('#movie').css('padding', '3px');
          $('#title').removeClass('titleExpanded');
          $('#actions').animate({top: 1, right: 3}, 'normal', 'linear', resizeGadget);
          toggleActionButton('expand', 'reduce', doExpand);
        }

        // shows details to expand gadget
        function expand() 
        {
          gadgets.window.adjustHeight(400);
          $('#movie').css('padding', '10px');
          $('#movie').corner("bite 1px").parent().css('padding', '8px').corner("round 10px");
          $('#cover').removeClass('detail'); // hack for nice expansion
          $('.detail').show('normal');
          $('#cover').addClass('detail').show('slow');
          $('#frame').animate({width: 650}, 'normal', 'linear', resizeGadget);
          $('#title').addClass('titleExpanded');
          $('#actions').animate({top: 10, right: 10});
          toggleActionButton('reduce', 'expand', doReduce);
          rseizeGadget();
        }

        // toggles the expand/reduce button
        function toggleActionButton(oldState, newState, clickFunc) 
        {
          $('#actions img').attr('src', $('#actions img').attr('src').replace(newState, oldState))
          .attr('alt', ucfirst(oldState) + ' details').attr('title', ucfirst(oldState) + ' details')
          .unbind('click').click(clickFunc);
        }

        // changes the state of the gadget
        function changeState(newState) 
        {
          delta = {'status': newState};
          wave.getState().submitDelta(delta);
        }

        function resizeGadget() 
        {
          gadgets.window.adjustHeight();
        }

        function ucfirst (str) 
        {
          str += '';
          var f = str.charAt(0).toUpperCase();
          return f + str.substr(1);
        }

      </script>

     <script type="text/javascript" src="http://jaap-y.appspot.com/jquery.corner.js"></script>

     <style type="text/css">
       <%@ include file="reset.css" %>
       <%@ include file="style.css" %>
       <c:import url="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" />
     </style>

     <div id="frame">
       <div id="movie">
         <div id="cover" class="detail">
           <a href="<%= property.getUrl() %>" target="_blank">
             <img src="<%= property.thumb %>" alt="<%= property.street_nr %>, <%= property.city %>" />
           </a>
         </div>
         <div id="infos">
           <div id="actions">
             <img src="http://jaap-y.appspot.com/images/reduce.png" alt="Verklein gadget" title="Verklein gadget" />
           </div>
           <div id="title" class="titleExpanded">
             <img src="http://jaap-y.appspot.com/images/tekoop.gif" title="Te koop" alt="Te koop" />
             <a href="<%= property.getUrl() %>" target="_blank"><%= property.street_nr %>, <%= property.city %>, <%= property.getPrice() %></a>
           </div>
           <div id="creatorsLabel" class="label detail">Kenmerken:</div>
           <div id="creators" class="values detail">
             <table>
               <% if (!property.houseType.isEmpty()) { %>
                 <tr>
                   <td class="left" width=150>Type woning:</td><td><%= property.houseType %></td>
                 </tr>             
               <% } %>
               <% if (!property.rooms.isEmpty() && property.rooms != "0") { %>
                 <tr>
                   <td class="left" width=150>Aantal kamers:</td><td class="num"><%= property.rooms %></td>
                 </tr>             
               <% } %>
               <% if (!property.area.isEmpty() && property.area != "0") { %>
                 <tr>
                   <td class="left" width=150>Woonoppervlak:</td><td class="num"><%= property.area %></td>
                 </tr>
               <% } else { %>
                 <tr><td width=150>&nbsp;</td><td>&nbsp;</td></tr>             
               <% } %>
               <% if (!property.since.isEmpty()) { %>
                 <tr>
                   <td class="left" width=150>In de koop sinds:</td><td class="num"><%= property.since %></td>
                 </tr>             
               <% } else { %>
                 <tr><td width=150>&nbsp;</td><td>&nbsp;</td></tr>             
               <% } %>
             </table>             
           </div>
         </div>
         <div id="logo" class="detail">
           <a href="http://www.jaap.nl" target="_blank">
             <img src="http://jaap-y.appspot.com/images/avatar.png" alt="JAAP.NL" />
           </a>
         </div>
         <div class="clear detail"></div>                  
       </div>
     </div>
    ]]>
  </Content>
</Module>     